<template>
  <div>
    <a-table
      :columns="columns"
      :data-source="tableList"
      :pagination="false"
      :scroll="{ x: 1500 }"
    >
      <span slot="isUrgent" slot-scope="text, record">
        <span :style="record.isUrgent === '0' ? 'color:#626262' : 'color:#f00'">
          {{ record.isUrgent === "0" ? "普通" : "加急" }}
       
        </span>
      </span>
      <span slot="isCsdReply" slot-scope="text, record">
        {{
          record.isCsdReply === null
            ? "暂无"
            : record.isCsdReply === "0"
            ? "未回复"
            : "已回复"
        }}
      </span>
      <!-- 创建时间-->
      <span slot="createTime" slot-scope="text, record">
        {{
          record.createTime === null || record.createTime === ""
            ? "暂无"
            : record.createTime.replace("T", " ")
        }}
      </span>

      <!-- 创建时间-->
      <span slot="updateTime" slot-scope="text, record">
        {{
          record.updateTime === null || record.updateTime === ""
            ? "暂无"
            : record.updateTime.replace("T", " ")
        }}
      </span>
      <span
        slot="state"
        slot-scope="text, record"
        :style="
          record.state === '暂缓处理'
            ? 'color:#ff9933'
            : record.state === '异常订单'
            ? 'color:#F3381D'
            : 'color:#3eae7c'
        "
      >
        {{ record.state }}
      </span>
      <span slot="action" slot-scope="text, record">
        <a
          v-if="tabKey != '5'"
          href="javascript:;"
          style="text-decoration: underline; color: rgb(41, 41, 224)"
          @click="editRowData(record, 'info')"
          >详情
        </a>
        <!-- <a-divider v-if="tabKey != '5' &&state!='finance'" type="vertical" /> -->
        <a
          v-if="tabKey === '5' && port != 'client'"
          href="javascript:;"
          style="text-decoration: underline; color: rgb(41, 41, 224)"
          @click="submitRow(record)"
          >提交
        </a>
        <a-divider v-if="tabKey === '5' && port != 'client'" type="vertical" />
        <a
          v-if="tabKey === '5'"
          href="javascript:;"
          style="text-decoration: underline; color: rgb(41, 41, 224)"
          @click="editRowData(record, 'edit')"
          >编辑
        </a>
        <a-divider v-if="tabKey === '5'" type="vertical" />
        <a
          v-if="tabKey === '5'"
          href="javascript:;"
          style="text-decoration: underline; color: rgb(41, 41, 224)"
          @click="editMessageNew(record)"
          >留言
        </a>
      </span>
    </a-table>

    <!-- //留言板 -->
    <a-modal v-model="visible" title="留言板">
      <template slot="footer" class="modelBtn">
        <a-button
          @click="visible = false"
          style="background: #d7d7d7; color: #fff; border: none"
          >关闭</a-button
        >
        <!-- <a-button :loading="loading" type="primary" @click="onSubmit"
        >提交</a-button
      > -->
      </template>
      <a-list
        v-if="comments.length"
        :data-source="comments"
        :header="`共有${comments.length}条留言`"
        item-layout="horizontal"
      >
        <a-list-item slot="renderItem" slot-scope="item">
          <a-comment
            :author="item.createByName"
            :content="item.message"
            :datetime="item.createTime.replace('T', ' ')"
          />
        </a-list-item>
      </a-list>
      <a-comment style="font-size: 18px">
        <div slot="content">
          <a-form-item>
            <a-textarea
            :maxLength="256"
              :rows="4"
              :value="wokerOrderMsg.message"
              @change="handleChange"
            />
          </a-form-item>
          <a-form-item>
            <a-button
              size="small"
              html-type="submit"
              :loading="submitting"
              type="primary"
              @click="handleSubmit"
            >
              发送留言
            </a-button>
          </a-form-item>
        </div>
      </a-comment>
    </a-modal>
  </div>
</template>

<script>
import moment from "moment";
import {
  workOrder_workMessage,
  workOrder_infoMessage,
  workOrder_updateState,
} from "@/apis/system/workOrder/workOrder";
export default {
  props: ["tableList", "getTabList", "tabKey", "state", "port"],
  data() {
    return {
      visible: false,
      comments: [],
      submitting: false,
      value: "",
      moment,
      wokerOrderMsg: {
        message: "",
        workId: "",
      },
      rowData: {},
    };
  },
  methods: {
    handleSubmit() {
      if (!this.wokerOrderMsg.message) {
        return;
      }
      this.submitting = true;
      setTimeout(async () => {
        let { code } = await workOrder_workMessage(this.wokerOrderMsg);
        if (code === "10000") {
          this.submitting = false;
          this.editMessageNew(this.rowData);
          this.wokerOrderMsg.message = "";
          this.getTabList();
        }
      }, 1000);
    },
    handleChange(e) {
      this.wokerOrderMsg.message = e.target.value;
    },

    //留言板
    async editMessageNew(record) {
      this.rowData = record;
      this.wokerOrderMsg.workId = record.id;
      let { code, responseBody } = await workOrder_infoMessage(record.id);
      if (code === "200") {
        this.comments = responseBody;
      }
      this.visible = true;
    },
    //提交每一行按钮
    submitRow(record) {
      let _this = this;
      this.$confirm({
        title: `确定要提交编号为${record.workNo}的工单吗?`,
        cancelText: "取消",
        okText: "确定",
        onOk() {
          return new Promise((resolve) => {
            setTimeout(async () => {
              let { code } = await workOrder_updateState(record.id);
              if (code === "10000") {
                _this.getTabList();
                resolve();
              }
            }, 1000);
          }).catch(() => console.log("Oops errors!"));
        },
        onCancel() {},
      });
    },
    //编辑每一行
    async editRowData(record, flag) {
      setTimeout(() => {
        this.$bus.$emit("workOrder_workInfo", record, flag);
      }, 10);
    },
  },
  computed: {
    columns() {
      if (this.port === "client") {
        return [
          {
            title: "工单编号",
            dataIndex: "workNo",
            align: "center",
            scopedSlots: { customRender: "workNo" },
            width: "10%",

            //  fixed: "left",
          },
          {
            title: "仓库",
            dataIndex: "warehousingName",
            align: "center",
            scopedSlots: { customRender: "warehousingName" },
            width: "9%",
          },
          {
            title: "标题",
            dataIndex: "title",
            // ellipsis: true,
            scopedSlots: { customRender: "title" },
            align: "center",
            width: "9%",
          },
          {
            title: "操作类型",
            dataIndex: "typeName",
            scopedSlots: { customRender: "typeName" },
            align: "center",
            width: "15%",
            // ellipsis: true,
          },
          {
            title: "是否加急",
            dataIndex: "isUrgent",
            scopedSlots: { customRender: "isUrgent" },
            align: "center",
            width: "8%",
            // ellipsis: true,
          },
          {
            title: "创建时间",
            dataIndex: "createTime",
            scopedSlots: { customRender: "createTime" },
            align: "center",
            width: "9%",
          },
          {
            title: "更新时间",
            dataIndex: "updateTime",
            scopedSlots: { customRender: "updateTime" },
            align: "center",
            width: "9%",
          },

          {
            title: "处理状态",
            dataIndex: "state",
            scopedSlots: { customRender: "state" },
            align: "center",
            width: "9%",
          },
          {
            title: "回复状态 ",
            dataIndex: "isCsdReply",
            align: "center",
            width: "10%",
            scopedSlots: { customRender: "isCsdReply" },
            // ellipsis: true,
          },
          {
            title: "操作",
            dataIndex: "action",
            scopedSlots: { customRender: "action" },
            align: "center",
            fixed: "right",
            width: 200,
          },
        ];
      } else {
        return [
          {
            title: "工单编号",
            dataIndex: "workNo",
            align: "center",
            scopedSlots: { customRender: "workNo" },
            width: "10%",

            //  fixed: "left",
          },
          {
            title: "仓库",
            dataIndex: "warehousingName",
            align: "center",
            scopedSlots: { customRender: "warehousingName" },
            width: "9%",
          },
          {
            title: "客户编号",
            dataIndex: "tenantId",
            align: "center",
            width: "9%",
          },
          {
            title: "标题",
            dataIndex: "title",
            // ellipsis: true,
            scopedSlots: { customRender: "title" },
            align: "center",
            width: "9%",
          },
          {
            title: "操作类型",
            dataIndex: "typeName",
            scopedSlots: { customRender: "typeName" },
            align: "center",
            width: "10%",
            // ellipsis: true,
          },
          {
            title: "是否加急",
            dataIndex: "isUrgent",
            scopedSlots: { customRender: "isUrgent" },
            align: "center",
            width: "8%",
            // ellipsis: true,
          },
          {
            title: "创建时间",
            dataIndex: "createTime",
            scopedSlots: { customRender: "createTime" },
            align: "center",
            width: "9%",
          },
          {
            title: "更新时间",
            dataIndex: "updateTime",
            scopedSlots: { customRender: "updateTime" },
            align: "center",
            width: "9%",
          },

          {
            title: "处理状态",
            dataIndex: "state",
            scopedSlots: { customRender: "state" },
            align: "center",
            width: "9%",
          },
          {
            title: "回复状态 ",
            dataIndex: "isCsdReply",
            align: "center",
            width: "9%",
            scopedSlots: { customRender: "isCsdReply" },
            // ellipsis: true,
          },
          {
            title: "操作",
            dataIndex: "action",
            scopedSlots: { customRender: "action" },
            align: "center",
            fixed: "right",
            width: 200,
          },
        ];
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.ant-form-item-control {
  text-align: right;
}
/deep/.ant-comment-content-detail {
  font-size: 16px;
}
/deep/.ant-comment-content-author-name {
  font-size: 16px;
}
/deep/.ant-comment-content-author-time {
  font-size: 12px;
}
</style>
